<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>拖拖生成页面</title>
    <link rel="stylesheet" href="../output/css/lib.min.css"/>
    <link href="http://pic.ofcard.com/themes/admin/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"
          type="text/css"/>
</head>
<body style="background-color: #fff !important;" ng-app="admin">


<ui-container style="display: none" controller="SetupCtrl">

    <div class="row">
        <div class="col-md-12">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">添加查询控件</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#" ng-click="show('modal/search/input.html')">输入框</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/input.date.html')">日期</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/input.date.range.html')">日期范围</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/input.select.html', 'SIS')">下拉输入</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/select.html', 'SIS')">下拉</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/select.multi.html', 'SIS')">下拉多选</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/select.user.html')">用户选择</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/search/region.html')">区域</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary">添加工具栏按钮</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                <ul class="dropdown-menu" role="menu">
                </ul>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary">添加表格列</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#" ng-click="show('modal/table/check.column.html')">选择列</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/table/date.column.html')">日期列</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/table/image.column.html')">图片列</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/table/progress.column.html')">进度条列</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/table/state.column.html', 'SIS')">状态列</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/table/operation.column.html', 'SIS')">操作列</a>
                    </li>
                    <li>
                        <a href="#" ng-click="show('modal/table/column.html')">自定义列</a>
                    </li>
                </ul>
            </div>

            <button type="button" class="btn btn-primary" ng-click="showAll()">显示生成的HTML</button>
        </div>
    </div>
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
           <div id="dd">
               <input ng-model="aaaa"/>
               <button ng-click="add()"></button>
           </div>

            <ui-search-form>
            </ui-search-form>

            <ui-tool-bar-table>
            </ui-tool-bar-table>

            <div id="tableContainer">
            </div>
        </div>
    </div>


</ui-container>
</body>
<script src="../output/js/lib.min.js"></script>
<script src="../output/assets/js/jquery.mockjax.js"></script>
<script src="http://pic.ofcard.com/themes/admin/plugins/zTree/jquery.ztree.core-3.5.min.js"
        type="text/javascript"></script>
<script src="http://pic.ofcard.com/themes/admin/plugins/zTree/jquery.ztree.excheck-3.5.js"
        type="text/javascript"></script>
<script src="http://pic.ofcard.com/themes/admin/plugins/zTree/jquery.ztree.exedit-3.5.js"
        type="text/javascript"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<script src="../output/js/all.js"></script>
<script>
    $.mockjax({
        url: '/test',
        response: function () {
            var aa = [];
            for (var i = 0; i < 10; i++) {
                aa.push({
                    progress: i * 10,
                    state: i,
                    a: Math.random(),
                    b: Math.random(),
                    c: Math.random(),
                    d: Math.random(),
                    e: '2014-11-1' + i + ' 11:11:11'
                })
            }
            this.responseText = {
                data: {
                    aaData: aa,
                    iTotalDisplayRecords: 1000,
                    iTotalRecords: 1000
                },
                result: 1
            }
        }
    });
</script>
<script>

    var $searchFormHtml = [];
    var $toolBarTableHtml = [];
    var $tableHtml = [];

    function SetupCtrl($scope, uiDialog, $compile){
        var dialog = null;

        $scope.add = function(){
            var $input = $('<input ng-model="aaaa"/>');
            $input = $compile($input)($scope);
            $('#dd').append($input);
        }

        //

        $scope.$searchFormRender = function($dom){
            $dom = $compile($dom)($scope);
            $scope.$searchForm.addFormItem($dom);
        }

        $scope.$tableRender = function(){
            var $e = $('<ui-table url="/test"></ui-table>').html($tableHtml.join(''));
            $('#tableContainer').html('');
            $e = $compile($e)($scope);
            $('#tableContainer').append($e);
        }

        //
        $scope.showAll = function(){
            var a = [
                '<ui-search-form>',
                    $searchFormHtml.join('\n'),
                '</ui-search-form>\n\n',

                '<ui-tool-bar-table>',
                    $toolBarTableHtml.join(''),
                '</ui-tool-bar-table>\n\n',

                '<ui-table url="/test">',
                    $tableHtml.join(''),
                '</ui-table>'
            ].join('\n');
            var w = window.open();
            var t = document.createElement('textarea');
            w.document.body.appendChild(t);
            t.value = a;
            t.style.width = 600;
            t.style.height = 600;
        }





        //
        $scope.show = function(url, ctrlName){
            dialog = uiDialog.load(url, $scope, ctrlName);
        }
        $scope.create = function(parent, component,formData){
            var $e = $('<' + component  + '/>');
            $.each(formData, function(index, attr){
                if(attr.name == '__content'){
                    $e.html(attr.value);
                }
                else if(attr.value){
                    $e.attr(attr.name, attr.value);
                }
            });

            //
            window[parent + 'Html'].push($('<div/>').append($e).html());

            //
            $scope[parent + 'Render']($e);
            dialog.close();
        }
    }
</script>
<script>
</script>
</html>
